<template>
  <div>
    <mu-circular-progress
      :size="90"
      color="red"
      v-if="loading"
      class="loading"
    />
    <div v-else>
      <div class="header-wrap">
        <list-title title="专辑"></list-title>
        <div class="album-msg-wrap">
          <div class="album-pic">
            <img v-lazy="album.picUrl" />
          </div>
          <div class="album-msg">
            <h3>{{ album.name }}</h3>
            <p>
              歌手：
              <span
                v-for="item in album.artists"
                :key="item.id"
                @click="goArtist(item.id)"
              >
                {{ item.name }}
              </span>
              >
            </p>
            <p>
              发行时间：{{ new Date(album.publishTime).getFullYear() }}.{{
                new Date(album.publishTime).getMonth() + 1
              }}.{{ new Date(album.publishTime).getDate() }}
            </p>
          </div>
        </div>
        <div class="listData">
          <div>
            <div>
              <span class="icon-collection"></span>
            </div>
            {{ info.likedCount }}
          </div>
          <div @click="goComment()">
            <div>
              <span class="icon-comment"></span>
            </div>
            {{ info.commentCount }}
          </div>
          <div>
            <div>
              <span class="icon-share"></span>
            </div>
            {{ info.shareCount }}
          </div>
          <div>
            <div>
              <span class="icon-download"></span>
            </div>
            下载
          </div>
        </div>
      </div>
      <music-list :songs="songs"></music-list>
    </div>
  </div>
</template>

<script lang="ts">
import musicList from "../../components/musicList.vue";
import listTitle from "../../components/listTitle.vue";
import { Vue, Component } from "vue-property-decorator";
import { Album, AlbumInfo, MusicInfo } from "@/model/music-info.model";
import { APIType } from "@/api";
import { Route } from "vue-router";
import Router from "vue-router";
import { namespace } from "vuex-class";
import { CommentHeader } from "@/model/common-header.model";
import { CommentType, CommonIdType } from "@/model/id-or-enum.model";

const AppModule = namespace("app");
@Component({
  components: {
    listTitle,
    musicList,
  },
})
export default class AlbumMainComponent extends Vue {
  // 专辑中的歌曲列表
  songs: MusicInfo[] = [];
  // 专辑的详细信息
  album: Album = null;
  // 专辑的附加信息
  info: AlbumInfo = null;
  // 加载状态
  loading = true;
  $api: APIType; // api
  $route: Route; // 路由信息
  $router: Router;
  // 专辑id
  id: CommonIdType = null;

  @AppModule.Mutation("setCommentHeader")
  public setCommentHeader: (type: CommentHeader) => void;
  @AppModule.Mutation("setCommentType")
  public setCommentType: (type: CommentType) => void;

  // 组件挂载后执行的生命计算钩子函数
  public mounted() {
    this.id = this.$route.params.id;
    this.$api.getAlbumDetail(this.id).then((result) => {
      this.songs = result.songs;
      this.album = result.album;
      this.id = this.album.id ?? this.id;
      this.info = result.album.info;
      this.loading = false;
    });
  }
  goComment(id?: CommonIdType) {
    id = id?.toString() ?? this.id?.toString();
    let header: CommentHeader = {
      name: this.album.name,
      artists: this.album.artists,
      musicpic: this.album.picUrl,
    };
    this.setCommentHeader(header);
    this.setCommentType(CommentType.ToAlbum);
    this.$router.push({ name: "comment", params: { id } }).catch((err) => err);
  }
  goArtist(id: CommonIdType) {
    this.$router.push({ path: `/artist/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.header-wrap {
  background: #df2d2d;
  color: #fff;
}
.album-msg-wrap {
  display: flex;
  .album-pic {
    width: 40%;
    padding: 0.2rem;
    img {
      width: 100%;
    }
  }
  .album-msg {
    flex: 1;
    padding: 0.2rem;
  }
}
.listData {
  display: flex;
}
.listData > div {
  flex: 1;
  text-align: center;
  cursor: pointer;
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
